<template>
  <div>
    <dialog-content :dialogOptions="dialogOptions || (new Date().getTime())">
      <template slot="dialog-content_content">
        <div class="scheduled-log" ref="scheduledLog" @mousewheel="scrollHandle">
          <ul class="scheduled-log_content">
            <li v-for="item in content" v-bind:key="item.id" class="scheduled-log_content-item">
              {{ $time.formatDate(item.createTime, 'yyyy-MM-dd HH:mm:ss') }} - {{ item.remark }}
            </li>
          </ul>
          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>
        </div>
      </template>
      <template slot="dialog-content_footer">
      </template>
    </dialog-content>
  </div>
</template>

<script>
import { getScheduledLogApi } from '@/api/scheduled'
import DialogContent from '@/components/common/dialog-content'
export default {
  components: { DialogContent },
  props: {
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      dialogOptions: {
        title: '调度任务日志信息',
        show: false,
        modal: true,
        width: '800px',
        height: '360px',
        center: true
      },
      query: {
        id: 0,
        page: 1,
        pageSize: 10,
        demarcateTime: this.$time.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'),
        init: false
      },
      data: {},
      content: [],
      first: true,
      lock: false,
      loading: false,
      noMore: false
    }
  },
  methods: {
    scrollHandle() {
      let el = this.$refs.scheduledLog
      if ((el.offsetHeight + el.scrollTop) - el.scrollHeight <= -1) {
        return
      }
      if (!this.first && this.data.last) {
        this.noMore = true
        return
      }
      if (this.lock) {
        return
      }
      this.lock = true

      this.first = false
      this.loading = true
      this.list(this.query)
    },
    init(id = 0) {
      this.query = {
        id: id,
        page: 1,
        pageSize: 10,
        demarcateTime: this.$time.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'),
        init: false
      }
      this.content = []
      this.data = {}

      this.list({
        id: this.query.id,
        page: 1,
        pageSize: 100,
        demarcateTime: this.query.demarcateTime,
        init: true
      })
    },
    list(data) {
      getScheduledLogApi(data).then(res => {
        this.data = res.data
        if (!this.first && !this.data.last) {
          this.query.page += 1
        }
        this.content = this.content.concat(this.data.content)
        this.loading = false
        this.lock = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .scheduled-log {
    height: 360px;
    overflow: auto;
    &_content {
      padding-left: 0px;
      &-item {
        list-style-type: none;
      }
    }
  }
</style>
